<!-- 客户详情-客户联系人-新增联系人组件 -->
<template>
  <a-modal
    :mask-closable="false"
    v-model:visible="modalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template #title> 新增联系人 </template>
    <div>
      <a-form
        auto-label-width
        :model="contactForm"
        ref="contactRef"
        :rules="rules"
        layout="vertical"
      >
        <a-form-item field="staffId" label="业务员">
          <a-select
            placeholder="请选择业务员"
            v-model="contactForm.staffId"
            allow-search
          >
            <a-option
              v-for="item in PersonnelInfoData"
              :key="item.id"
              :value="item.id"
              >{{ item.name }}</a-option
            >
          </a-select>
        </a-form-item>
        <a-form-item field="startTime" label="开始时间">
          <a-date-picker
            placeholder="请选择开始时间"
            v-model="contactForm.startTime"
          />
        </a-form-item>
        <a-form-item field="endTime" label="结束时间">
          <a-date-picker
            placeholder="请选择结束时间"
            v-model="contactForm.endTime"
          />
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { reactive, ref, computed, Ref, watchEffect } from 'vue';
  import regex from '@/utils/regex';
  import { IClientAddContact } from '@/types/order';
  import { cloneDeep } from 'lodash';
  import { GetPersonnelinformation } from '@/api/home/System settings/personal-information/index';
  import { useRoute } from 'vue-router';

  const route = useRoute();
  // 获取销售负责人信息
  const PersonnelInfoData = ref();
  const GetPersonnelInfo = async () => {
    const res = await GetPersonnelinformation({ page: 1, size: -1 });
    PersonnelInfoData.value = res.content.data;
  };
  GetPersonnelInfo();

  const props = withDefaults(
    defineProps<{
      visible: boolean; // 是否显示对话框
      detailInfo: IClientAddContact; // 传进来的id
    }>(),
    {
      visible: false,
    }
  );

  const emits = defineEmits(['update:visible', 'addSalesmanEmit']);

  // let type =

  // 判断是否显示对话框
  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emits('update:visible', visible);
    },
  });

  // 储存表单
  const contactForm = ref<any>({
    startTime: '',
    staffId: undefined,
    endTime: '',
    customerId: undefined,
  });

  // let contactForm: Ref<IClientAddContact> = ref(cloneDeep(props.detailInfo));

  watchEffect(() => {
    // if (modalVisible.value) contactForm.value.contactForm = cloneDeep(props.detailInfo);
    if (props.detailInfo.id) {
      contactForm.value = cloneDeep(props.detailInfo);
      console.log(contactForm.value);
    }
  });

  // 表单rules
  const rules = reactive({
    staffId: [
      {
        required: true,
        message: '业务员为必选项',
      },
    ],
    endTime: [
      {
        required: true,
        message: '结束时间为必选项',
      },
    ],
    startTime: [
      {
        required: true,
        message: '开始时间为必选项',
      },
    ],
  });
  let contactRef = ref(); // 储存弹出框的ref

  // 取消
  const handleCancel = () => {
    modalVisible.value = false;
    contactRef.value.resetFields();
  };

  // 确定
  const handleOk = async () => {
    await contactRef.value.validate((valid: any) => {
      if (valid === undefined) {
        contactForm.value.endTime = new Date(
          contactForm.value.endTime
        ).toJSON();
        contactForm.value.startTime = new Date(
          contactForm.value.startTime
        ).toJSON();
        if (contactForm.value.id) {
          emits('addSalesmanEmit', contactForm.value, 'edit');
        } else emits('addSalesmanEmit', contactForm.value, 'add');
        modalVisible.value = false;
      } else {
        modalVisible.value = true;
      }
    });
  };
</script>

<style scoped lang="less">
  .add-contact {
    padding: 10px 30px;
  }
</style>
